<template>
	<div class="wrap">
		<div class="data">
            <div class="left" style="width: 170px;margin-right: 100px;" >
		    	 <div class="headline">			  	    	 	 
		    	 	 <span class="title">用户数量</span>			  	    	 	 
		    	 </div>  
		    	 <div class="numberWrap">
		    	 	<span v-for="item in userNum" class="type3 type">{{item}}</span>
		    	 </div>		    	 
            </div>
            <div class="right" style="width: 340px;">
		    	 <div class="headline">			  	    	 	 
		    	 	 <span class="title">数据总量</span>			  	    	 	 
		    	 </div>  
		    	 <div class="numberWrap">
		    	 	<span v-for="item in totalNum" class="type1 type">{{item}}</span>
		    	 </div>	            	
            </div>
		</div>
		<e-chart :options="optionMap" style="height:100%"></e-chart>		
	</div>
</template>

<script>
	import {totoalNum} from "@/api/bigScreen/bigScreen";
	import 'echarts/map/js/china.js'
	var mydata = [{
			name: '北京',
			value: 13
		}, {
			name: '天津',
			value: 8
		},
		{
			name: '上海',
			value: 640
		}, {
			name: '重庆',
			value: 0
		},
		{
			name: '河北',
			value: 767
		}, {
			name: '河南',
			value: 0
		},
		{
			name: '云南',
			value: 0
		}, {
			name: '辽宁',
			value: 20
		},
		{
			name: '黑龙江',
			value: 0
		}, {
			name: '湖南',
			value: 0
		},
		{
			name: '安徽',
			value: 10
		}, {
			name: '山东',
			value: 664
		},
		{
			name: '新疆',
			value: 0
		}, {
			name: '江苏',
			value: 22768
		},
		{
			name: '浙江',
			value: 139
		}, {
			name: '江西',
			value: 20
		},
		{
			name: '湖北',
			value: 11
		}, {
			name: '广西',
			value: 154
		},
		{
			name: '甘肃',
			value: 0
		}, {
			name: '山西',
			value: 0
		},
		{
			name: '内蒙古',
			value: 0
		}, {
			name: '陕西',
			value: 0
		},
		{
			name: '吉林',
			value: 0
		}, {
			name: '福建',
			value: 0
		},
		{
			name: '贵州',
			value: 23
		}, {
			name: '广东',
			value: 29
		},
		{
			name: '青海',
			value: 0
		}, {
			name: '西藏',
			value: 0
		},
		{
			name: '四川',
			value: 0
		}, {
			name: '宁夏',
			value: 0
		},
		{
			name: '海南',
			value: 48
		}, {
			name: '台湾',
			value: 0
		},
		{
			name: '香港',
			value: 0
		}, {
			name: '澳门',
			value: 0
		},
        {
			name: '南海诸岛',
			value: 0
		}		
	]	
	export default {
		data() {
			return {
				totalNum:[],
				userNum:[],				
				optionMap: {
					title: {
						text: 'Squirrel生态环境云服务平台',
						subtext: '',
						left: 'center',
						top:15,
						textStyle:{
							color:'#fff',
							fontSize:30
						},	
						show:false
					},	
					
					tooltip: {
						trigger: 'item'
					},
		            //左侧小导航图标
					visualMap: {
						show: true,
						type: 'piecewise', 
						textStyle:{
							color:'#fff'
						},
						formatter:function(a,b){
							if(a==0){
								return ''
							}else if(a>=1000){
								return '1000以上'
							}else{
								return a+'~'+b
							}
						},
						left: 10,
						top: '70%',						
						splitList: [
							{
								start: 1000,
								end: 999999999
							}, {
								start: 101,
								end: 1000
							},
							{
								start: 11,
								end: 100
							}, {
								start: 1,
								end: 10
							}
						],
						color: ['#592b97', '#26489f', '#0768ad', '#5b89c4']
					},					
					//配置属性
					series: [{
						name: '站点数',
						type: 'map',
						mapType: 'china',
						x:'18%',
						y:'15%',
						roam: true,		// 开启平移和缩放	
						aspectScale:0.75, // 地图的长宽比
						zoom:1.05,         // 地图的缩放比例
						scaleLimit:{    // 限制缩放比例 
							min:0.7, 
							max:1.3
						},
			            itemStyle: {
			                normal: {
			                    areaColor: '#000',
			                    shadowColor: 'rgba(0,54,255, 0.8)',
			                    shadowBlur: 6
			                }
			            },						
						label: {
							show: true, //省份名称  
							color:'#fff'
						},
						emphasis: {
                            label: {
                                show: true,//选中状态是否显示省份名称
                                color:'#fff'                               
                            },
                            itemStyle:{                            	
								areaColor: '#11123a' ,
                            }

						},						
						data: mydata //数据
					}]
				}
			}
		},
		mounted() {
           this.init()
		},
		methods: {
		   formatArr(str,len){
		   	 let arr=[]
		   	 let zero=len-str.length
           	 for(var i=0;i<zero;i++){
           	 	arr.push('0')
           	 }	
           	 for(var i=0;i<str.length;i++){
           	 	arr.push(str[i])
           	 }  
           	 return arr
		   },			
           init(totalNum,userNum){  
           	 totoalNum().then(res=>{
	           	 let totalNum=res.data.data.totalNum.toString()           	 
	           	 let userNum=res.data.data.userNum.toString()
	           	 this.totalNum=this.formatArr(totalNum,10)
	           	 this.userNum=this.formatArr(userNum,5)   
           	 })
           	 return false   
           },
		}
	}
</script>
<style lang="scss" scoped>
	.wrap{width: 100%;height: 100%;position: relative;background: url(/img/bigScreen/02.png);background-size: 100% 100%;padding: 0 0 0 10px;}
	.data{position: absolute;height: 100px;width: 100%;z-index: 1;display: flex;top: 20px;left: 20px;}
</style>
